<template>
    <div>
        <!--操作按钮-->
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" @click="importQuery($event)">导入查询</el-button>
                    <el-button type="primary" @click="flowShare($event)">流量共享</el-button>
                    <el-button type="primary" @click="cardStop($event)">销户</el-button>
                    <el-button type="primary" @click="updateCombo($event)">套餐变更</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <el-table :data="tableData" border height="500px" max-height="500px">
            <el-table-column fixed prop="comboName" label="套餐名称"/>
            <el-table-column label="id" prop="id" align="center">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column prop="iccid" label="卡号" align="center"/>
            <el-table-column prop="channelName" label="通道" align="center"/>
            <el-table-column prop="poolName" label="流量池" align="center"/>
            <el-table-column prop="comboName" label="套餐" align="center"/>
            <el-table-column prop="used" label="已使用流量" align="center"/>
            <el-table-column prop="left" label="剩余流量" align="center"/>
            <el-table-column prop="total" label="累计使用流量" s align="center"/>
            <el-table-column prop="customerName" label="客户" align="center"/>
            <el-table-column prop="period" label="生命期" align="center"/>
            <el-table-column prop="status" label="卡状态" align="center"/>
            <el-table-column prop="closeStatus" label="是否主动停机" align="center"/>
            <el-table-column prop="enterTime" label="入库时间" align="center"/>
        </el-table>
        <!--翻页-->
        <div>
            <pageHelper :current-page="page" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" class="my_pagenation"/>
        </div>
        <!--操作表单对话框-->
        <el-dialog :title="this.dialogTitle" :visible.sync="operateDialogFormVisible" width="30%"
                   @close="operateDialogCloseCall">
            <el-form :model="importFormData" :rules="importRules" ref="ruleForm">
                <el-form-item :label-width="formLabelWidth" prop="file">
                    <el-button type="success" @click="$refs.file.click()">{{ importFormData.file ? '重新选择' : '选择文件' }}
                    </el-button>
                    {{ importFormData.file ? importFormData.file .name : '' }}
                    <input type="file" ref="file" style="display:none;"
                           @change="importFormData.file = $event.target.files[0]"/>
                </el-form-item>
                <br>
                <el-form-item label="套餐" :label-width="formLabelWidth" prop="combo" v-if="dialogTitle=='套餐变更'">
                    <el-select v-model="importFormData.combo" placeholder="请选择" class="test">
                        <el-option v-for="item in combos" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="operateDialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="operateCommit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios';
    import pageHelper from '../common/pageHelper'
    import {mytips} from '@/module/tools';
    import {Loading} from 'element-ui';

    const map = {
        importQuery: '导入查询',
    };
    export default {
        name: 'sepcialOperateList',
        components: {pageHelper, Loading},
        data() {
            return {
                page: 1,
                size: 10,
                total: 120,
                importQueryFile: null,
                operateDialogFormVisible: false,
                formLabelWidth: '80px',
                dialogTitle: '',//导入查询，流量共享，销户，套餐变更
                tableData: [],
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                combos:
                    [{label: "套餐1", value: 1},
                        {label: "套餐2", value: 2},
                        {label: "套餐3", value: 3}],
                importFormData: {
                    file: null,
                    combo: null
                },
                importRules: {
                    file: [
                        {required: true, message: '请选择文件', trigger: 'change'}
                    ],
                    combo: [
                        {required: true, message: '请选择套餐', trigger: 'change'}
                    ]
                },
            }
                ;
        },
        methods: {
            importQuery(event) {
                this.changeDialogTitleByButton(event);
            },
            flowShare(event) {
                this.changeDialogTitleByButton(event);
            },
            cardStop(event) {
                this.changeDialogTitleByButton(event);
            },
            updateCombo(event) {
                this.changeDialogTitleByButton(event);
            },
            //由于几个操作按钮公用一个弹出框，所有需要根据所点击的按钮来修改弹出框的标题
            changeDialogTitleByButton(event) {
                this.dialogTitle = event.target.innerText;
                this.operateDialogFormVisible = true;
            },
            //操作确认
            operateCommit() {
                switch (this.dialogTitle) {
                    case '导入查询':
                        this.importQuerySubmit();
                        break;
                    case '流量共享':
                        this.flowShareSubmit();
                        break;
                    case '销户':
                        this.cardStopSubmit();
                        break;
                    case '套餐变更':
                        this.updateComboSubmit();
                        break;
                    default :
                        return
                }
                console.log("确认导入");
            },
            //操作对话框关闭回调
            operateDialogCloseCall() {
                //注意关闭数据后的数据清除
                this.importFormData.file = '';
            },
            importQuerySubmit() {
                let formData = new FormData();
                if (!this.importFormData.file && !this.importQueryFile) {
                    return;
                }
                //如果操作表单的file为false则用本地的导入查询文件
                formData.append('file', this.importFormData.file || this.importQueryFile);
                formData.append('page', this.page);
                formData.append('size', this.size);
                console.log('formData', formData);
                axios.post(API_PATH + "/card/importQuery", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        //每次查询导入成功，保存上传的文件，方便继续查询
                        this.importQueryFile = this.importFormData.file;
                        this.console.log('导入响应res', res)
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }
                })
            },
            flowShareSubmit() {
                this.commonOperateSubmit('/card/flowShare');
                let formData = new FormData();
                formData.append('file', this.importFormData.file);
                formData.append('comboCode', this.importFormData.comboCode);
                console.log('formData', formData);
                axios.post(API_PATH + '/card/flowShare', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }
                })
            },
            cardStopSubmit() {
                this.commonOperateSubmit('/card/stop');
            },
            updateComboSubmit() {
                this.commonOperateSubmit('/card/updateCombo');
            },
            commonOperateSubmit(url) {
                let formData = new FormData();
                formData.append('file', this.importFormData.file);
                console.log('formData', formData);
                axios.post(API_PATH + url, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }
                })
            },
            handleSizeChange(size) {
                this.size = size;
                this.importQuerySubmit();
            },
            handleCurrentChange(page) {
                this.page = page;
                this.importQuerySubmit();
            }
        },
        filters: {},
        mounted() {
        }

    }
</script>

<style scoped>
    .express-ctr-item {
        margin-top: 12px;
    }

    .express-ctr-item .express-ctr-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 32px;
    }

    .test {
        width: 100px;
    }

    .file-btn {
        background-color: gray;
        width: 200px;
    }
</style>

